<template>
	<div class="xh-address">
		<el-select
			class="xh-address-item"
			filterable
			:disabled="disabled"
			default-first-option
			@change="handleValueChange(leave, arguments)"
			v-for="leave in ['province', 'city', 'country'].filter((l) => params[l])"
			:key="leave"
			:placeholder="{ province: '省份', city: '地市', country: '区县' }[leave]"
			:value="dataValue[leave]"
		>
			<el-option
				v-for="(item, index) in options[leave]"
				:key="index"
				:label="item.name"
				:value="item.code"
				:disabled="item.disabled"
			>
			</el-option>
		</el-select>
	</div>
</template>
<script type="text/javascript">
import Address from './address'
import { objDeepCopy } from '@/utils'
function getOptions(leave, code) {
	var tempAddr = objDeepCopy(Address)
	leave = {
		province: 0,
		city: 1,
		country: 2
	}[leave]
	var areas = tempAddr
	if (code) {
		for (let i = 0; i < leave - 1; i++) {
			areas = areas.reduce((o, v) => {
				return o.concat(v.children)
			}, [])
		}
		return areas.find((a) => a.code === code).children
	} else {
		for (let i = 0; i < leave; i++) {
			areas = areas.reduce((o, v) => {
				o.push(...v.children)
				return o
			}, [])
		}
		return areas
	}
}
export default {
	name: 'xh-address', // 新建 select
	props: {
		value: {
			type: Object,
			default: () => {
				return {}
			}
		},
		/** 索引值 用于更新数据 */
		index: Number,
		/** 包含数据源 */
		item: {
			type: Object,
			default: () => ({})
		},
		disabled: {
			type: Boolean,
			default: false
		},
		params: {
			type: Object,
			default() {
				return {
					province: true,
					city: true,
					country: true
				}
			}
		}
	},
	watch: {
		params: {
			handler(val) {
				this.options = {
					province: [],
					city: [],
					country: []
				}
				if (val.province) {
					this.options.province = getOptions('province')
					return
				}
				if (val.city) {
					this.options.city = getOptions('city')
					return
				}
				if (val.country) {
					this.options.country = getOptions('country')
					return
				}
			},
			immediate: true
		},
		value: {
			handler(val) {
				let areaTypes = ['province', 'city', 'country'].filter(
					(v) => this.params[v]
				)
				let tempVal = val
				let dataValue = {}
				areaTypes.forEach((area) => {
					dataValue[area] = tempVal[area]
				})
				this.dataValue = dataValue
			},
			immediate: true
		}
	},
	data() {
		return {
			options: {
				province: [],
				city: [],
				country: []
			},
			dataValue: {}
		}
	},
	computed: {},
	mounted() {},
	methods: {
		handleValueChange(leave, args) {
			var code = args[0]
			let _leave = {
				province: 'city',
				city: 'country'
			}[leave]
			if (_leave) {
				var newoptions = getOptions(_leave, code)
				this.options[_leave] = newoptions
			}
			// 值传递给dataValue
			let areaItem = this.options[leave].find((v) => v.code === code)
			this.dataValue[leave] = areaItem ? areaItem.name : ''
			if (leave === 'province') {
				this.dataValue.city = ''
				this.dataValue.country = ''
			}
			if (leave === 'city') {
				this.dataValue.country = ''
			}
			this.$emit('value-change', {
				item: this.item,
				index: this.index,
				// value: Object.keys(this.params)
				// 	.filter((a) => this.params[a])
				// 	.map((a) => this.dataValue[a])
				value: { ...this.dataValue }
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.xh-address {
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	margin-right: -5px;
}
.xh-address-item {
	flex: 1 1 30%;
	margin-right: 5px;
}
</style>
